<template>
  <div class="wrap">
			<!-- 会员 -->
			<div class="wrap-top-w">
				<div class="wrap-top">

					<div class="top-im">
						<img src="/static/imgs_s03/s03-meber.png" alt="" class="im-a">
					</div>
					<span class="top-jiuyan">久颜</span>
					<div class="top-meber">
						钻石会员
					</div>
					<div class="top-f">
						<div class="f-lef">
							<p class="leiji">
								累计积分：
							</p>
							<P>
								我的生日：
							</P>
						</div>

						<div class="shuzi">
							<P>
								25800
							</P>
							<P>
								1995-12-5
							</P>
						</div>
					</div>
					<ul>
						<li class="top-lin-a"></li>
						<li class="top-lin-b"></li>
						<li class="top-sz">680/2000</li>
					</ul>
					<div class="top-im-b">
						<img src="/static/imgs_s03/s03_pic.png" alt="">
					</div>
				</div>
			</div>
			<!-- 收藏夹 -->
			<div class="wrap-nav">
				<div class="nav-se">

					<ul class="nav-shoucang">
						<li>

							<p>158</p>
							<p>
								我的收藏
							</p>
						</li>
						<li class="linw">
							<p>1</p>
							<p>
								兑换券
							</p>
						</li>
						<li class="linw2">
							<p>
								16
							</p>
							<p>
								礼品卡
							</p>
						</li>
						<li>
							<p>
								2580
							</p>
							<p>
								可用积分
							</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- 我的余额 -->
			<div class="wrap-contenr">
				<div class="com-nav">
					<p class="con-mom">我的余额</p>
					<p class="con-y">
						￥168.00
					</p>
					<div class="con-nav-bu">
						立即充值
					</div>

				</div>
			</div>
			<!-- 免费领 -->
			<div class="wrap-free">
				<div class="free-box">
					<div class="free-box-a">

						<dv class="free-apple">
							<div class="apple-im">
								<img src="/static/imgs_s03/s03_apple .png" alt="">
							</div>
							<p class="pic-text">
								<span class="erath">0</span>
								<span class="red">元</span>
								<span>
                        领水果
                    </span>
							</p>
							<P>
								<span class="a1">水果免费</span>
								<span class="a2">更享包邮</span>
								<span class="a3">
                        >
                    </span>
							</P>

						</dv>
						<div class="free-tree">
							<img src="/static/imgs_s03/s03_tree.png" alt="">
						</div>
					</div>
				</div>
			</div>
			<!-- 更多服务 -->
			<div class="wrap-more">
				<div class="wrap-more-box">
					<h1>
                    更多服务
                </h1>
					<div class="more-top">
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_integral.png" alt="">
							</div>
							<p>积分商城</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_gift.png" alt="">
							</div>
							<p>礼品卡</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_min.png" alt="">
							</div>
							<p>消息通知</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_mony.png" alt="">
							</div>
							<p>资金明细</p>
						</div>

					</div>
					<div class="more-top">
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_evluaate.png" alt="">
							</div>
							<p>我的评价</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_dressw.png" alt="">
							</div>
							<p>地址管理</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_caker.png" alt="">
							</div>
							<p>我的生日</p>
						</div>
						<div class="more-top-a">
							<div class="mor-img">
								<img src="/static/imgs_s03/s03_pencil.png" alt="">
							</div>
							<p>意见反馈</p>
						</div>

					</div>

				</div>

			</div>
		</div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
			.wrap {
				width: 100%;
				height: 100%;
				background-color: #eee;
			}
			
			.wrap-top {
				width: 375px;
				margin: 0 auto;
				position: relative;
			}
			
			.top-im .im-a {
				width: 338px;
				height: 163px;
			}
			
			.wrap-top-w {
				width: 100%;
				background-color: #fff;
			}
			
			.top-im {
				text-align: center;
			}
			
			.top-jiuyan {
				width: 32px;
				font-size: 15px;
				font-family: "Source Han Sans CN";
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				position: absolute;
				left: 102PX;
				top: 18px;
			}
			
			.top-meber {
				width: 54px;
				height: 18px;
				background: rgba(124, 120, 202, 1);
				border-radius: 9px;
				font-size: 11px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 19px;
				opacity: 0.8;
				text-align: center;
				position: absolute;
				left: 100px;
				top: 42px;
			}
			
			.wrap-top p {
				color: #605DA5;
				font-size: 12px;
				font-family: "Source Han Sans CN";
				font-weight: 400;
			}
			
			.wrap-top p:nth-child(2n) {
				margin-top: 5px;
			}
			
			.top-f {
				display: flex;
				position: absolute;
				left: 40px;
				top: 80px;
			}
			
			.top-lin-a {
				width: 48px;
				height: 6px;
				background: rgba(142, 138, 228, 1);
				border-radius: 3px;
				position: absolute;
				left: -3px;
			}
			
			.wrap-top ul {
				display: flex;
				position: absolute;
				left: 38px;
				top: 131px;
			}
			
			.top-lin-b {
				width: 151px;
				height: 6px;
				background: rgba(255, 255, 255, 1);
				border-radius: 3px;
			}
			
			.top-im-b img {
				width: 54px;
				height: 54px;
				position: absolute;
				top: 15px;
				left: 35px;
			}
			
			.top-sz {
				font-size: 11px;
				color: #605DA5;
				margin-left: 10px;
				line-height: 7px;
			}
			
			.wrap-nav {
				width: 100%;
				background-color: #fff;
			}
			
			.nav-shoucang {
				display: flex;
				text-align: center;
				margin-left: 20px;
			}
			
			.nav-shoucang li {
				width: 84px;
				/* margin: 0px 20px; */
				font-size: 12px;
			}
			
			.nav-shoucang li p {
				line-height: 24px;
			}
			
			.nav-se {
				width: 375px;
				margin: 0 auto;
			}
			
			.linw {
				border-left: 1px solid #4141;
				border-right: 1px solid #4141;
			}
			
			.linw2 {
				border-right: 1px solid #4141;
			}
			
			.wrap-contenr {
				width: 100%;
				background-color: #fff;
				margin-top: 20px;
			}
			
			.com-nav {
				width: 375px;
				height: 75px;
				margin: 0 auto;
				position: relative;
			}
			
			.con-mom {
				font-size: 10px;
				padding-top: 10px;
				margin-left: 20px;
			}
			
			.con-y {
				font-size: 16px;
				font-weight: 400;
				padding-top: 20px;
				margin-left: 20px;
			}
			
			.con-nav-bu {
				border: 1px solid #ccc;
				border-radius: 15px;
				padding: 5px 10px;
				color: #000;
				position: absolute;
				top: 38px;
				left: 254px;
			}
			
			.wrap-free {
				width: 100%;
				margin-top: 15px;
				background-color: #fff;
			}
			
			.free-box {
				width: 375px;
				margin: 0 auto;
				height: 75px;
				position: relative;
				border-radius: 8px;
			}
			
			.apple-im {
				margin-left: 8px;
				padding-top: 3px;
				margin-bottom: -3px;
			}
			
			.apple-im img {
				width: 25px;
				height: 10px;
				margin-left: -2px;
			}
			
			.erath {
				font-size: 18px;
				color: rgb(213, 61, 53);
				font-weight: 600;
				position: absolute;
				top: 0px;
				left: 8px;
			}
			
			.red {
				font-size: 12px;
				color: rgb(213, 61, 53);
				margin-left: 18px;
			}
			
			.pic-text {
				height: 20px;
				line-height: 20px;
				position: relative;
			}
			
			.a1 {
				color: rgb(173, 173, 173);
				font-size: 8px;
				margin-left: 9px;
			}
			
			.a2 {
				color: rgb(173, 173, 173);
				font-size: 8px;
			}
			
			.a3 {
				display: inline-block;
				width: 8px;
				height: 8px;
				background-color: rgb(235, 176, 66);
				border-radius: 100%;
				font-size: 8px;
				line-height: 8px;
				text-align: center;
				color: #fff;
			}
			
			.free-box-a {
				display: flex;
			}
			
			.free-tree img {
				width: 82px;
				height: 60px;
				margin-left: 182px;
			}
			
			.free-tree {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			.free-apple {
				margin-left: 10px;
				margin-top: 20px;
			}
			
			.wrap-more {
				width: 100%;
				background-color: #fff;
			}
			
			.wrap-more-box {
				width: 375px;
				margin: 0 auto;
			}
			
			.more-top {
				display: flex;
				padding-top: 20px;
			}
			
			.mor-img img {
				width: 25px;
				height: 22px;
			}
			
			.mor-img {
				width: 50px;
				height: 30px;
				text-align: center;
			}
			
			.more-top-a p {
				color: rgb(106, 107, 112);
        font-size: 12px;
			}
			
			.more-top-a {
				text-align: center;
				margin-left: 40px;
				margin-top: 40px;
			}
			
			h1 {
				font-weight: 600;
				padding-top: 20px;
				margin-left: 17px;
			}
		</style>
